<!-- 用户管理 -->
<template>
  <div>
    <el-card class="box-card" :body-style="{ padding: '10px 10px 2px 10px' }">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
        <el-form-item label="账号">
          <el-input v-model="queryParam.loginName" placeholder="请输入账号" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="queryParam.realName" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="queryParam.departName" placeholder="请输入部门" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="queryParam.roleName" placeholder="请输入角色" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="rest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="tableData" border style="width: 100%" height="53vh">
        <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width">
          <template #default="scope">
            <div v-if="item.prop === 'sex'" class="gender-container flex">
              <img class="gender-icon" :src="scope.row.sex === 1
                ? require('@/assets/icon_sex_man.png')
                : require('@/assets/icon_sex_woman.png')
                " />
              <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
            </div>
            <div v-else-if="item.prop === 'disabledFlag'">
              <el-switch v-model="scope.row.disabledFlag" active-color="#13ce66" :active-value="0" :inactive-value="1"
                @change="handleDisabled(scope.row)">
              </el-switch>
            </div>
            <div v-else-if="item.prop === 'roleNames'">
              <el-tag size="medium" v-for="(item, index) in scope.row.roleNames" :key="index" :style="{
                'margin-right': '5px',
                'margin-bottom': scope.row.roleNames.length > 1 ? '5px' : '',
              }">{{ item }}</el-tag>
            </div>
            <div v-else-if="item.prop === 'departNames'">
              <el-tag size="medium" v-for="(item, index) in scope.row.departNames" :style="{
                'margin-right': '5px',
                'margin-bottom': scope.row.roleNames.length > 1 ? '5px' : '',
              }" :key="index">{{ item }}</el-tag>
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right">
          <template slot-scope="{ row }">
            <el-button icon="el-icon-edit" link size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-popconfirm v-if="row.accountType === 0" class="button10Left" title="确定要重置密码吗？"
              @confirm="() => updatePassword(row)">
              <el-button slot="reference" link size="mini">重置密码</el-button>
            </el-popconfirm>
            <el-popconfirm v-if="row.accountType === 0" class="button10Left" title="确定要删除吗？"
              @confirm="() => handleDelete(row)">
              <el-button slot="reference" icon="el-icon-delete" link size="mini" class="danger_button">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination"></pagination>
    </el-card>
    <user-dialog ref="userDialog" @ok="loadData" />
  </div>
</template>

<script>
import { pageList, deleteTrue, disabled, updatePassword } from '@/api/sys/user'
import pagination from '@/components/pagination.vue'
import userDialog from './userDialog.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'user',
  components: { pagination, userDialog },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {},
      tableData: [],
      tableProps: [
        { title: '账号', prop: 'loginName', width: '', checked: true },
        { title: '姓名', prop: 'realName', width: '', checked: true },
        { title: '性别', prop: 'sex', width: '', checked: true },
        { title: '电话', prop: 'phone', width: '', checked: true },
        // { title: '电子邮箱', prop: 'email', width: '', checked: true },
        { title: '角色', prop: 'roleNames', width: '', checked: true },
        { title: '部门', prop: 'departNames', width: '', checked: true },
        { title: '状态', prop: 'disabledFlag', width: '80', checked: true },
      ],
    }
  },

  mounted() {
    this.loadData()
  },

  methods: {
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    rest() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    // 获取分页的数据
    loadData() {
      var param = Object.assign(this.queryParam, this.searchModel)
      pageList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records //数据
            this.totalCount = res.data.data.total //总条数
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 分页的方法
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    // 打开添加的对话框
    handleAdd() {
      this.$refs.userDialog.add()
    },
    // 编辑
    handleEdit(row) {
      this.$refs.userDialog.edit(row)
    },
    // 打开查看的对话框
    handleShow(row) {
      this.$refs.userDialog.show(row)
    },
    handleDisabled(row) {
      const param = {
        accountId: row.accountId,
        disabledFlag: row.disabledFlag,
      }
      disabled(param).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.loadData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 删除
    handleDelete(row) {
      deleteTrue(row.accountId)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.loadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    updatePassword(row) {
      const param = {
        accountId: row.accountId,
      }
      updatePassword(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.loadData()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.avatar-container {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  vertical-align: middle;

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .avatar-vip {
    border: 2px solid #cece1e;
  }

  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}

.gender-container {
  .gender-icon {
    width: 20px;
  }
}

.demo-form-inline {
  .el-form-item {
    margin-bottom: 8px;
  }
}
</style>
